<script setup>

import {ref, defineEmits, defineProps} from 'vue'

import StepTitleDescription from '@/components/common/StepTitleDescription.vue'
import OneImage from '@/components/common/OneImage.vue'
import TwoInchesInputs from '@/components/common/TwoInchesInputs.vue'

const emit = defineEmits(['submit'])

const stepTitleDescription = ref({
  title: 'How many inches beyond the frame?',
  description: 'This is the distance from the frame to the edge of the drapery.'
});

const getLeftRight = (LeftRight) => {
   emit('submit', LeftRight)
}

const OneImageData = ref({
   src: 'https://cdn.shopify.com/s/files/1/0744/8598/9591/files/Measurement-Finder_B3.svg?v=1745721135',
   alt:'beyond window frame left right',
})

</script>

<template>
 <div class="content-container">
   <StepTitleDescription :title-and-description="stepTitleDescription" />
   <OneImage :OneImage="OneImageData" />

   <TwoInchesInputs @submit="getLeftRight" />

   <p class="bottom-center">Add extra width (typically 6-15 inches) on each side of the window frame for the curtains stack.</p>
 </div>


</template>

<style scoped>

.content-container {
   display: flex;
   flex-direction: column;
  align-items: center;
}

.bottom-center {
  text-align: center;
}

</style>